<template>
    <div class="mobile-container" style="background: #7d7d7f;height: 100%" >
      <div class="tab-top">
        <div class="common-tab tab-1" @click="getScheduleLock">
          <div class="tab-text">{{name}}/{{scheduleInfo.matchCode}}</div>
        </div>
        <div class="common-tab tab-2">
          <div class="tab-text" v-if="scheduleInfo.type == 1 && !scheduleInfo.twoTime">青1</div>
          <div class="tab-text" v-else-if="scheduleInfo.type == 1 && scheduleInfo.twoTime && scheduleInfo.lockTwoTime==1">青1</div>
          <div class="tab-text" v-else-if="scheduleInfo.type == 1 && scheduleInfo.twoTime && scheduleInfo.lockTwoTime==2">青2</div>
          <div class="tab-text" v-else-if="scheduleInfo.type == 2 && scheduleInfo.twoTime && scheduleInfo.lockTwoTime==1">青1</div>
          <div class="tab-text" v-else-if="scheduleInfo.type == 2 && scheduleInfo.twoTime && scheduleInfo.lockTwoTime==2">红1</div>
          <div class="tab-text" v-else-if="scheduleInfo.type == 2 && scheduleInfo.twoTime && scheduleInfo.lockTwoTime==3">青2</div>
          <div class="tab-text" v-else-if="scheduleInfo.type == 2 && scheduleInfo.twoTime && scheduleInfo.lockTwoTime==4">红2</div>
          <div class="tab-text" v-else>0</div>
        </div>
        <div class="common-tab tab-3" @click="submitScore">
          <div class="tab-text">提交评分</div>
        </div>
      </div>
      <div v-if="scheduleInfo.type == 1 || (scheduleInfo.type == 2 && scheduleInfo.twoTime)">
        <div class="score-box">
          <div class="common-tab left-score">
            <div class="tab-text tab-text-font">
              <input type="number" @change="changeA" v-model="accuracy" style="width: 100%;text-align: center;background:#E32F2F;border:#E32F2F" />
            </div>
          </div>
          <div class="common-tab right-score">
            <div class="tab-text tab-text-font">
              <input type="number" @change="changeE" v-model="expressiveness"  style="width: 100%;text-align: center;background:#244C93;border:#244C93" />
            </div>
          </div>
        </div>
        <div>
          <div class="score-box score-opt-box">
            <div class="score-opt1">
              <div class="tab-text-opt1">
                <div class="tab-text-opt-font" @click="prevScoreALeft1">
                  <div class="tab-text-opt-font">-{{r1}}</div>
                </div>
              </div>
            </div>
            <div class="score-opt2">
              <div class="tab-text-opt2" @click="prevScoreAAdd">
                <div class="tab-text-opt-font">+</div>
              </div>
            </div>
            <div class="score-opt3">
              <div class="tab-text-opt3" @click="prevScorePLeft1">
                <div class="tab-text-opt-font">-{{r1}}</div>
              </div>
            </div>
          </div>
          <div class="score-box score-opt-box">
            <div class="score-opt1">
              <div class="tab-text-opt1">
                <div class="tab-text-opt-font" @click="prevScoreALeft2">
                  <div class="tab-text-opt-font">-{{r2}}</div>
                </div>
              </div>
            </div>
            <div class="score-opt2">
              <div class="tab-text-opt3" @click="prevScorePAdd">
                <div class="tab-text-opt-font">+</div>
              </div>
            </div>
            <div class="score-opt3">
              <div class="tab-text-opt3" @click="prevScorePLeft2">
                <div class="tab-text-opt-font">-{{r2}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="scheduleInfo.type == 2 && !scheduleInfo.twoTime">
        <div class="score-box">
          <div class="common-tab left-score" :class="pk==1 ? 'pk-select' : ''" @click="pkSelect(1)">
            <div class="tab-text tab-text-font">
              <label>红</label>
            </div>
          </div>
          <div class="common-tab right-score" :class="pk==2 ? 'pk-select' : ''" @click="pkSelect(2)">
            <div class="tab-text tab-text-font">青</div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { ruleScoreBaseRateList } from '@/api/matchScoreRule'
  import { getScheduleInfo } from '@/api/matchSchedule'
  import { querySchedleLock } from '@/api/matchScheduleLocked'
  import { showMsg } from '@/utils'
  import { saveSocre, matchRefereeScore } from '@/api/matchScore'
  import { queryLoginStates, deleteLoginStates } from '@/api/user'
  export default {
    data() {
      return {
        scheduleId: '',
        scheduleInfo: {},
        ruleBaseRate1: {},
        ruleBaseRate2: {},
        expressiveness: 6.0,
        accuracy: 4.0,
        matchId: null,
        refereeId: null,
        matchAdminId: null,
        referee: '',
        pk: 0,
        scoreType: 1,
        matchScore: {},
        isRun: false,
        r1: 0,
        r2: 0
      }
    },
    created() {
      deleteLoginStates({ refereeId: this.$store.state.user.matchReferee.id }).then(res => {})
      this.referee = this.$store.state.user.name
      this.matchId = this.$store.state.user.matchReferee.matchId
      this.refereeId = this.$store.state.user.matchReferee.refereeId
      this.matchAdminId = this.$store.state.user.matchReferee.matchAdminId
      this.getScheduleLock()
      if (this.isRun === false) {
        window.setInterval(() => {
          this.queryLoginStatesMe()
          this.matchRefereeScoreMe()
        }, 3000)
        this.isRun = true
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'name',
        'avatar'
      ])
    },
    methods: {
      queryLoginStatesMe() {
        queryLoginStates({ refereeId: this.$store.state.user.matchReferee.id }).then(res => {
          if (res.data.data != null) {
            deleteLoginStates({ refereeId: this.$store.state.user.matchReferee.id }).then(res => {
              this.$store.dispatch('LogOut').then(() => {
                location.reload()
              })
            })
          }
        })
      },
      getScheduleLock() {
        var obj = {
          matchId: this.matchId,
          matchAdminId: this.matchAdminId
        }
        querySchedleLock(obj).then(res => {
          if (res.data.data != null) {
            if (res.data.data.status === 1) {
              this.$router.push({ path: '/ipadCoachScore' })
            } else {
              this.scheduleId = res.data.data.matchScheduleId
              this.getScheduleInfoData()
              this.accuracy = 4
              this.expressiveness = 6
              showMsg('获取场次成功', 1)
            }
          } else {
            showMsg('未开始新比赛，请等待获取。', 1)
          }
        })
      },
      getScheduleInfoData() {
        getScheduleInfo({ matchScheduleId: this.scheduleId }).then(res => {
          this.scheduleInfo = res.data.data
          this.getRuleScoreBaseRateList()
          if (this.scheduleInfo.isLocked === 1) {
            var lockTwoTime = this.scheduleInfo.lockTwoTime
            console.log(this.scheduleInfo)
            if (lockTwoTime === 0) {
              this.scoreType = 1
            } else if (lockTwoTime === 1) {
              this.scoreType = 2
            } else if (lockTwoTime === 2) {
              this.scoreType = 1
            } else if (lockTwoTime === 3) {
              this.scoreType = 2
            }
            this.matchRefereeScoreMe()
          }
        })
      },
      matchRefereeScoreMe() {
        if (this.scheduleId !== '' && this.scheduleId !== null) {
          var obj = {
            matchScheduleId: this.scheduleId,
            refereeId: this.refereeId,
            scoreType: this.scoreType
          }
          matchRefereeScore(obj).then(res => {
            this.matchScore = res.data.data
          })
        }
      },
      getRuleScoreBaseRateList() {
        var obj = {
          ruleId: this.scheduleInfo.refereeType
        }
        ruleScoreBaseRateList(obj).then(response => {
          this.ruleBaseRate1 = response.data.data[0]
          this.ruleBaseRate2 = response.data.data[1]
          this.r1 = parseFloat(this.ruleBaseRate1.baseScore * this.ruleBaseRate1.baseRate).toFixed(1)
          this.r2 = parseFloat(this.ruleBaseRate2.baseScore * this.ruleBaseRate2.baseRate).toFixed(1)
        })
      },
      prevScorePLeft1() {
        this.expressiveness = parseFloat(this.expressiveness - (this.ruleBaseRate1.baseScore * this.ruleBaseRate1.baseRate * 100) / 100).toFixed(1)
        this.expressiveness = parseFloat(this.expressiveness).toFixed(1)
        if (this.expressiveness < 0) {
          this.expressiveness = 0
        }
      },
      prevScorePLeft2() {
        this.expressiveness = parseFloat(this.expressiveness - (this.ruleBaseRate2.baseScore * this.ruleBaseRate2.baseRate * 100) / 100).toFixed(1)
        this.expressiveness = parseFloat(this.expressiveness).toFixed(1)
        if (this.expressiveness < 0) {
          this.expressiveness = 0
        }
      },
      prevScorePAdd() {
        this.expressiveness = parseFloat(this.expressiveness) + 0.1
        this.expressiveness = parseFloat(this.expressiveness).toFixed(1)
        if (this.expressiveness > 6) {
          this.expressiveness = 6
        }
      },
      changeE() {
        console.log(this.expressiveness)
        if (this.expressiveness > 6) {
          this.expressiveness = 6
        } else if (this.expressiveness < 0) {
          this.expressiveness = 0
        }
      },
      prevScoreALeft1() {
        this.accuracy = parseFloat(this.accuracy - (this.ruleBaseRate1.baseScore * this.ruleBaseRate1.baseRate * 100) / 100).toFixed(1)
        this.accuracy = parseFloat(this.accuracy).toFixed(1)
        if (this.accuracy < 0) {
          this.accuracy = 0
        }
      },
      prevScoreALeft2() {
        this.accuracy = parseFloat(this.accuracy - (this.ruleBaseRate2.baseScore * this.ruleBaseRate2.baseRate * 100) / 100).toFixed(1)
        this.accuracy = parseFloat(this.accuracy).toFixed(1)
        if (this.accuracy < 0) {
          this.accuracy = 0
        }
      },
      prevScoreAAdd() {
        this.accuracy = parseFloat(this.accuracy) + 0.1
        this.accuracy = parseFloat(this.accuracy).toFixed(1)
        if (this.accuracy > 4) {
          this.accuracy = 4
        }
      },
      changeA() {
      //  this.accuracy = this.accuracy.toFixed(1)
        if (this.accuracy > 4) {
          this.accuracy = 4
        } else if (this.accuracy < 0) {
          this.accuracy = 0
        }
      },
      submitScore() {
        if (this.scheduleInfo.type === 2 && !this.scheduleInfo.twoTime && this.pk === 0) {
          showMsg('未选择', 2)
          return
        }
        var obj = {
          expressiveness: this.expressiveness,
          accuracy: this.accuracy,
          matchScheduleId: this.scheduleId,
          refereeId: this.refereeId,
          referee: this.referee,
          scoreType: this.scoreType,
          winner: this.pk
        }
        if (this.matchScore != null) {
          obj.id = this.matchScore.id
          showMsg('已提交，如需重复提交请联系记录台。', 2)
          return
        } else {
          obj.id = 0
        }
        saveSocre(obj).then(res => {
          if (res.data.code === 0) {
            this.matchRefereeScoreMe()
            showMsg(res.data.message, 1)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      },
      pkSelect(pk) {
        this.pk = pk
      }
    }

  }
</script>

<style scoped>
  .mobile-container{
    margin-left: 2px;
  }
  .common-tab{
    display: inline-block;
    vertical-align: middle;
  }
  .tab-top{
    width: 100%;
    height: 50px;
  }
  .tab-1{
    width: 38%;
    height: 100%;
    background: #EE3333;
  }
  .tab-2{
    width: 20%;
    height: 100%;
    background: #44546A;

  }
  .tab-3{
    width: 39%;
    height: 100%;
    background: #E1E10F;
  }
  .tab-text{
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
    color: #ffffff;
    font-size: 16pt;
  }
  .tab-text-opt-font{
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
    color: #FFFF00;
    font-size: 26pt;
  }
  .score-box{
    margin-top: 30px;
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
  }
  .left-score{
    background: #E32F2F;
    height: 140px;
    width: 140px;
    border-radius: 1rem;
  }
  .right-score{
    background: #244C93;
    height: 140px;
    width: 140px;
    border-radius: 1rem;
  }
  .tab-text-font{
    font-size: 50pt;
    color: #FFFF00;
  }
  .score-opt-box{
    height: 80px;
    width: 100%;
  }
  .score-opt1{
    width: 35%;
    height: 100%;
  }
  .score-opt2{
    width: 28%;
    height: 100%;
  }
  .score-opt3{
    width: 35%;
    height: 100%;
  }
  .tab-text-opt1{
    height: 100%;
    background: #FF1919;
    margin: 0 10px 0 10px;
    border-radius: 1rem;
  }
  .tab-text-opt2{
    height: 100%;
    background: #F04141;
    margin: 0 10px 0 10px;
    border-radius: 1rem;
  }
  .tab-text-opt3{
    height: 100%;
    background: #156AB8;
    margin: 0 10px 0 10px;
    border-radius: 1rem;
  }
  .pk-select{
    border: 6px solid #00ff00;
  }
</style>
